<template>
  <div class="app-container">
    <div class="button" style="padding-bottom:1rem">
      <div class="grid-content bg-purple-dark">
        <el-row style="padding-bottom: 0.5rem">
          <el-col :span="6">
            <span>录入人:</span>
            <el-input size="small" v-model="trueName" placeholder="请输入录入人姓名" style="width: 60%"></el-input>
          </el-col>
          <el-col :span="14">
            <span>时间段:</span>
            <el-date-picker
              v-model="beginTime"
              type="date"
              size="small"
              placeholder="请选择日期时间"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            {{"~"}}
            <el-date-picker
              v-model="endTime"
              type="date"
              size="small"
              placeholder="请选择日期时间"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" size="small" @click="findJournal">查询</el-button>
            <el-button type="primary" size="small" @click="toFirst">重置</el-button>
          </el-col>

        </el-row>

      </div>
    </div>
    <el-table
      id="myform"
      :data="list"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="录入人" align="center">
        <template slot-scope="scope">{{ scope.row.trueName }}</template>
      </el-table-column>
      <el-table-column label="标的" align="center">
        <template slot-scope="scope">{{ scope.row.claimsNumber }}</template>
      </el-table-column>
      <el-table-column label="时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">{{ scope.row.operate |rounding}}</template>
      </el-table-column>
    </el-table>
    <!--    <el-pagination-->
    <!--      @size-change="handleSizeChange"-->
    <!--      @current-change="handleCurrentChange"-->
    <!--      :current-page="currentPage"-->
    <!--      :page-sizes="[5, 10, 15, 20]"-->
    <!--      :page-size="pageSize"-->
    <!--      layout="total, sizes, prev, pager, next, jumper"-->
    <!--      :total="total"-->
    <!--    ></el-pagination>-->
  </div>
</template>

<script>
  import $ from "@/api/sysuser";

  export default {
    data() {
      return {
        value: "",
        state: 0,
        list: [],
        listLoading: true,
        currentPage: 1,
        pageSize: 10,
        total: 0,
        options: [],
        beginTime: "",
        endTime: "",
        trueName: "",
      };
    },
    created() {
      this.fetchData();
    },
    filters:{
      rounding(value){
        value = value.split(":")[0];
        return value;
      }
    },
    methods: {

      fetchData() {
        $.sysLogList({}).then(res => {
          if (res.success) {
            this.list = res.data
            console.log(res.data)
          }
        })
      },
      findJournal() {
        $.sysLogList({trueName: this.trueName, begin: this.beginTime, end: this.endTime}).then(res => {
          if (res.success) {
            this.list = res.data
            // console.log(res.data)
          }
        })
      },
      toFirst() {
        this.trueName = ""
        this.beginTime = ""
        this.endTime = ""
        this.fetchData()
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.currentPage = 1;
        // console.log(this.currentPage)
        if (this.state == 1) {
          this.find();
          //console.log(this.currentPage)
        } else this.fetchData();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        //console.log(val)
        if (this.state == 1) {
          this.find();
        } else this.fetchData();
      },

    }
  };
</script>
<style>
  .button {
    padding-left: 1rem;
  }
</style>
